<!-- 邀请奖励 -->
<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view :class="model+'-wrap2'">
				<view class="status_bar">

				</view>
				<view class="nav_bar flex align-center justify-between">
					<view class="flex-1">
						<view @click="$tool.goBack()" class="f0 p-3">
							<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
						</view>
					</view>
					<view class="A-Medium" :class="'navTitle_'+model">
						<!-- {{i18n.m115}} -->
						{{i18n.m005}}
					</view>
					<view class="flex-1">
						
					</view>
					<!-- <view @click="$tool.navTo('/pages/invitationRewards/invitationRecord')"
						class="flex-1 text-alignR A-Medium record" :class="model=='light'?'recordLight':''">
						<view class="pr-3">
							{{i18n.m116}}
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- banner -->
		<view class="mb-3 f0" style="margin-top: 14rpx;">
			{{this.bannerImg + ""}}
			<image class="ml-3" style="width: 690rpx;height: 252rpx;" :src="$tool.changeImg(bannerImg.pictureUrl)" mode=""></image>
		</view>
		<!-- <view class="banner A-Medium mb-3 mx-auto flex" :class="model=='light'?'bannerLight':''">
			<view class="flex-1">
				<view class="mt-6 bannerTitle ">
					{{i18n.m117}}
				</view>
				<view class="bannerDesc mt-5">
					{{i18n.m118}}
				</view>
				<view class="bannerValue mt-2">
					500-3000 <text class="bannerDesc ml-1">USDT</text>
				</view>
			</view>
			<view class="f0 mt-3">
				<image style="width: 186rpx;height: 242rpx;margin-right: 48rpx;"
					src="/static/images/invitationRewards/3.png" mode=""></image>
			</view>
			<view class="f0">
				<image style="width: 383rpx;height: 123rpx;position: absolute;top: 30rpx;left: 40rpx;"
					src="/static/images/invitationRewards/2.png" mode=""></image>
			</view>
		</view> -->
		<!-- 步骤 -->
		<view class="stup A-Medium mx-auto" :style="model=='light'?'background:#fff':''">
			<view class="f0 flex justify-center">
				<image style="width: 536rpx;height: 80rpx;" src="/static/images/invitationRewards/4.png" mode="">
				</image>
			</view>
			<view class="flex align-center" style="margin: 16rpx 70rpx;">
				<view class="flex-1 stupTitle">
					{{i18n.m119}}
				</view>
				<view class="flex-1 text-alignC stupTitle">
					{{i18n.m120}}
				</view>
				<view class="flex-1 text-alignR stupTitle">
					{{i18n.m121}}
				</view>
			</view>
		</view>
		<!-- 我的邀请码 -->
		<view class="myInvite A-Medium m-3 p-3" :class="model=='light'?'myInviteLight':''">
			<view class="myInviteTitle mb-3">
				{{i18n.m122}}
			</view>
			<view v-for="(item,index) in 1" class="codeWrap mb-3 flex align-center justify-between">
				<view class="code">
					{{inviteCode}}
				</view>
				<view @click="copy(inviteCode)" class="copy">
					{{i18n.m123}}
				</view>
			</view>
			<view class="flex">
				<view @click="openPopup" class="flex-1 flex align-center justify-center btn mr-3">
					<view class="f0">
						<image style="width: 32rpx;height: 32rpx;margin-right: 4rpx;"
							:src="'/static/images/invitationRewards/5_'+model+'.png'" mode=""></image>
					</view>
					{{i18n.m124}}
				</view>
				<view @click="$tool.navTo('/pages/invitationRewards/shareImg')"
					class="flex-1 flex align-center justify-center btn">
					<view class="f0">
						<image style="width: 32rpx;height: 32rpx;margin-right: 4rpx;"
							:src="'/static/images/invitationRewards/6_'+model+'.png'" mode=""></image>
					</view>
					{{i18n.m125}}
				</view>
			</view>
		</view>
		<!-- 邀请规则 -->
		<view class="myInvite A-Medium m-3 p-3" :class="model=='light'?'myInviteLight':''">
			<view class="flex mb-3 align-center justify-center">
				<view class="f0">
					<image style="width: 78rpx;height: 16rpx;" src="/static/images/invitationRewards/7.png" mode="">
					</image>
				</view>
				<view class="myInviteTitle mx-1">
					{{i18n.m126}}
				</view>
				<view class="f0">
					<image style="width: 78rpx;height: 16rpx;" src="/static/images/invitationRewards/8.png" mode="">
					</image>
				</view>
			</view>
			<view class="code" v-html="content">

			</view>
		</view>
		<!-- 面对面邀请 -->
		<uni-popup ref="popup" type="center">
			<view class="flex flex-column align-center">
				<view class="f0" style="position: relative;width: 563rpx;">
					<image style="width: 563rpx;height: 711rpx;"
						:src="'/static/images/invitationRewards/9_'+model+'.png'" mode=""></image>
					<view class=""
						style="position: absolute;width: 260rpx;height: 253rpx;background: #fff;top: 138rpx;left: 152rpx;">
						<image style="width: 260rpx;height: 253rpx;" :src="'data:image/png;base64,'+img" mode=""></image>
					</view>
				</view>
				<view class="f0 mt-6">
					<image @click="closePopup" style="width: 88rpx;height: 88rpx;" src="/static/images/quancha.png"
						mode=""></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		inviteInviteRule,
		generateQRCode,
		carouselList,
	} from '@/core/api/index.js';
	import {
		baseUrl
	} from '@/core/baseUrl.js';
	export default {
		data() {
			return {
				// inviteCode:'',
				content: '',
				img: '',
				bannerImg: '',
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
			carouselList({
				pageNo: 1,
				pageSize: 1000
			}).then(res=>{
				this.bannerImg = res.result.records.filter((e) => e.type == "2")[0];
			})
		},
		onLoad() {
			// this.inviteCode = '1808418349619675137';
			// console.log(this.inviteCode,'cs');
			inviteInviteRule().then(res => {
				this.content = res.result.records[0].mobileView;
			})
			
			generateQRCode({
				"height":500,
				"qrCodeData":'https://invite.luckycat.website/h5/#/pages/login/registerH5?inviteCode='+this.inviteCode,
				// "qrCodeData":'https://vip.jym666.top/h5/#/pages/login/registerH5?inviteCode='+this.inviteCode,
				"width":500,
			}).then(res=>{
				this.img = res.result;
			})
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			model() {
				return this.$store.state.config.model;
			},
			inviteCode() {
				return this.$store.state.config.inviteCode;
			}
		},
		methods: {
			copy(e) {
				uni.setClipboardData({
					data: e
				})
			},
			openPopup() {
				this.$refs.popup.open('center');
			},
			closePopup() {
				this.$refs.popup.close();
			},
		}
	}
</script>

<style scoped lang="scss">
	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	.dark-wrap2 {
		background: url(/static/images/invitationRewards/1.png);
		background-repeat: no-repeat;
		background-size: 750rpx auto;
		padding-bottom: 30rpx;
	}

	/* 非夜间模式 */
	.light-wrap2 {
		background: url(/static/images/invitationRewards/1.png);
		background-repeat: no-repeat;
		background-size: 750rpx auto;
		padding-bottom: 30rpx;
	}

	.banner {
		width: 690rpx;
		height: 296rpx;
		background: #16181C;
		border-radius: 30rpx;
		position: relative;
		padding-left: 54rpx;

		.bannerTitle {
			font-size: 34rpx;
			color: #F7F7F7;
		}

		.bannerDesc {
			font-size: 26rpx;
			color: #AAACB8;
		}

		.bannerValue {
			font-size: 44rpx;
			color: #82DA4C;
		}
	}

	.bannerLight {
		background: #5951BA;
	}

	.stup {
		width: 690rpx;
		height: 190rpx;
		background: #16181C;
		border-radius: 30rpx;
		padding-top: 32rpx;

		.stupTitle {
			flex-shrink: 0;
			font-size: 24rpx;
			color: #AAACB8;
		}
	}

	.myInvite {
		background: #16181C;
		border-radius: 30rpx;

		.myInviteTitle {
			font-size: 32rpx;
			color: #F7F7F7;
		}

		.codeWrap {
			background: #1F2128;
			padding: 17rpx 30rpx;
			border-radius: 16rpx;

			.copy {
				font-size: 28rpx;
				color: #82DA4C;
			}
		}

		.code {
			font-size: 32rpx;
			color: #AAACB8;
		}

		.btn {
			flex-shrink: 0;
			font-size: 28rpx;
			color: #F7F7F7;
			padding: 24rpx 0;
			background: #1F2128;
			border-radius: 16rpx;
		}
	}

	.myInviteLight {
		background: #fff;

		.myInviteTitle {
			color: #0E0F11;
		}

		.codeWrap {
			background: #F4F4F4;
		}

		.btn {
			background: #F4F4F4;
			color: #0E0F11;
		}

		.code {
			color: #7F838D;
		}
	}
</style>